<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="framework/icons/tdesign.css" rel="stylesheet">
    <link href="css/wrapper.css" rel="stylesheet">
    <link href="css/top.css" rel="stylesheet">
    <link href="css/footer.css" rel="stylesheet">

    <link href="css/library.css" rel="stylesheet">
    <title>库</title>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="top-area">
                <div class="top-area-fix" id="fixedBox">
                    <!-- top部分 -->
                    <div class="top">
                        <div class="return" onclick="location.href='shop.html'">
                            <i class="i tdesign:chevron-left"></i>
                        </div>
                        <div class="top-title">
                            <p>库</p>
                        </div>
                        <div class="user_head" onclick="location.href='userInfo.html'">
                            <img src="img/user_head.jpg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="library">
                <div class="input">
                    <input type="text">
                    <div class="i tdesign:search"></div>
                </div>

                <div class="setting">
                    <p>排序方式：</p>
                    <select>
                        <option>最近玩过</option>
                        <option>名称</option>
                        <option>游戏时间</option>
                    </select>
                </div>

                <div class="library-item">
                    <div>
                        <img src="img/library_poster1.png">
                    </div>
                    <div>
                        <img src="img/library_poster2.png">
                    </div>
                    <div>
                        <img src="img/library_poster3.png">
                    </div>
                    <div>
                        <img src="img/library_poster4.png">
                    </div>
                    <div>
                        <img src="img/library_poster5.png">
                    </div>
                    <div>
                        <img src="img/library_poster6.png">
                    </div>
                    <div>
                        <img src="img/library_poster7.png">
                    </div>
                    <div>
                        <img src="img/library_poster8.png">
                    </div>
                    <div>
                        <img src="img/library_poster9.png">
                    </div>
                    <div>
                        <img src="img/library_poster10.png">
                    </div>
                </div>
            </div>
        </div>

        <ul class="footer">
            <li  class="shop" onclick="location.href='shop.html'">
                <i class="i tdesign:discount-filled"></i>
            </li>
            <li class="news">
                <i class="i tdesign:article"></i>
            </li>
            <li class="secure" onclick="location.href='secure.html'">
                <i class="i tdesign:shield-error"></i>
            </li>
            <li class="notification">
                <i class="i tdesign:notification-filled"></i>
            </li>
            <li class="user" onclick="location.href='user.html'">
                <i class="i tdesign:view-list"></i>
            </li>
        </ul>
    </div>
</body>
</html>